import Taro from '@tarojs/taro'

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import { AtTabs, AtTabsPane, AtGrid } from 'taro-ui'
import './index.scss'

interface Props {

}

interface State {
    current: number
    homeData: any
}
@inject('store')
@observer
class Index extends Component<Props, State> {
    constructor(props) {
        super(props)
        this.state = {
            current: 0,
            homeData: {}
        }
    }
    componentDidMount() {
        this.getData();
    }

    getData = async () => {
        Taro.cloud.callFunction({
            // 要调用的云函数名称
            name: 'home',
            // 传递给云函数的event参数
            data: {

            }
        }).then(res => {
            this.setState({
                homeData: res.result
            })
            console.log('haidi res', res);
        }).catch(err => {
            console.log('haidi err', err);
        })

    }



    handleClick = (value) => {
        this.setState({
            current: value
        })
    }

    render() {
        const { homeData } = this.state;
        const { appid, data } = homeData || {};
        const { title } = data?.[0] || {};
        return (
            <AtTabs
              current={this.state.current}
              scroll
              height='100%'
              tabDirection='vertical'
              tabList={[
                    { title: '标签页1' },
                    { title: '标签页2' },
                    { title: '标签页3' },
                    { title: '标签页4' },
                    { title: '标签页5' },
                    { title: '标签页6' },
                ]}
              onClick={this.handleClick}
            >
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={0}>
                    <View style='font-size:18px;text-align:center;height:200px;'>{appid}</View>

                </AtTabsPane>
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={1}>
                    <AtGrid mode='rect' hasBorder={false} columnNum={2} data={
                        [
                            {
                                image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                                value: '领取中心'
                            },
                            {
                                image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                                value: '找折扣'
                            },

                            {
                                image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
                                value: '新品首发'
                            },
                            {
                                image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
                                value: '领会员'
                            },
                            {
                                image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
                                value: '领个京豆'
                            },
                            {
                                image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
                                value: '手机馆'
                            }
                        ]
                    }
                    />
                </AtTabsPane>
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={2}>
                    <View style='font-size:18px;text-align:center;height:200px;'>{title}</View>
                </AtTabsPane>
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={3}>
                    <View style='font-size:18px;text-align:center;height:200px;'>标签页四的内容</View>
                </AtTabsPane>
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={4}>
                    <View style='font-size:18px;text-align:center;height:200px;'>标签页五的内容</View>
                </AtTabsPane>
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={5}>
                    <View style='font-size:18px;text-align:center;height:200px;'>标签页六的内容</View>
                </AtTabsPane>
            </AtTabs>
        )
    }
}

export default Index
